<template>
	<view class="logmian">
		<!-- #ifdef H5 -->
		<svg class="icon" aria-hidden="true">
			<use xlink:href="#icon-pingguo"></use>
		</svg>
		<!-- #endif -->
		<view class="area-inputs">
			<view class="myname">
				<i class="iconfont icon-31wode"></i>
				<input
					class="nameput"
					type="text"
					placeholder="用户名"
					v-model="username"
				/>
			</view>
			<view class="mypwd">
				<i class="iconfont icon-icon-test26"></i>
				<input
					:type="hidePwd ? 'password' : 'text'"
					style="border: 0;outline: none; background-color: rgba(0, 0, 0, 0);"
					placeholder="密码"
					v-model="password"
				/>
				<view @click="hidePwd = !hidePwd">
					<i
						class="mypwdicon"
						:class="
							hidePwd
								? 'iconfont icon-icon-test1'
								: 'iconfont icon-icon-test'
						"
					></i>
				</view>
			</view>
			<view @tap="loginFn" class="cksub">登录</view>
			<!-- <view class="ckbtm">
				<view>忘记密码</view>
				<view>立即注册</view>
			</view> -->
		</view>
	</view>
</template>
<script setup>
	import { getUserInfo } from '@/http/api.js';
	import { useStore } from 'vuex'; // 引入useStore 方法
import {
	reactive,
	toRefs,
	ref,
	onMounted,
	getCurrentInstance
} from 'vue';
const store = useStore(); // 该方法用于返回store 实例
let hidePwd = ref(true);
const data = reactive({
	username: 'admin',
	password: '123456',
	ruleusername: /^[a-zA-Z0-9_-]{4,16}$/,
	rulepassword: /^[0-9a-zA-Z]{6,16}$/,
});
let {
	password,
	rules,
	username,
	ruleusername,
	rulepassword
} = toRefs(data);
const loginFn = () => {
	if (!ruleusername.value.test(username.value)) {
		showToast('4到16位（字母，数字，下划线，减号)');
	} else if (!rulepassword.value.test(password.value)) {
		showToast('密码应该为6-16位');
	} else {
		const logindata = {
			username: username.value,
			password: 	password.value
		};
		getUserInfo(logindata).then(res=>{
			if(res.meta.status === 200) {
		store.commit('userInfo',res.data)
		uni.navigateBack()
			}else{
				showToast('账号密码错误');
			}
		})
	}
};
/* 提示框 */
let showToast = (title = '', icon = 'none', duration = 1500) => {
	uni.showToast({
		title,
		icon,
		duration,
		position: 'center',
		mask: true
	});
};
</script>
<style lang="scss" scoped>
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
	color: #666;
	font-size: 16px;
}

input:-moz-placeholder,
textarea:-moz-placeholder {
	color: #666;
	font-size: 16px;
}

input::-moz-placeholder,
textarea::-moz-placeholder {
	color: #666;
	font-size: 16px;
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
	color: #666;
	font-size: 16px;
}
.logmian {
	box-sizing: border-box;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background-color: #aaa;
	height: 100vh;
	.icon {
		position: absolute;
		transform: translate(0, -200%);
		width: 400px;
		height: 100px;
	}
	.area-inputs {
		// width: 280px;
		.myname {
			display: flex;
			align-items: center;
			background-color: red;
			height: 50px;
			border-radius: 90px;
			margin-bottom: 10px;
			background-color: white;
			i {
				padding: 20px;
			}
			.nameput {
				flex: 1;
				padding-right: 50px;
			}
		}
		.mypwd {
			height: 50px;
			background-color: red;
			display: flex;
			align-items: center;
			border-radius: 90px;
			margin-bottom: 10px;
			background-color: white;
			i {
				padding: 20px;
			}
		}
	}
	.cksub {
		height: 50px;
		border-radius: 90px;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: red;
		color: white;
		margin-bottom: 10px;
	}
	.ckbtm {
		display: flex;
		justify-content: space-around;
	}
}
</style>
